<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
        <input type="text" id="username" />
        <input type="radio" id="sexOne" name="sex" value="男" />男
        <input type="radio" id="sexTwo" checked name="sex" value="女" />女
        <input type="text" id="age" />
        <button id="add">添加</button>
    </div>
    <br />
    <table cellspacing="0" border="1" width="600px">
        <thead>
            <tr>
                <td width="20%">
                    <input type="checkbox" class="selectAll">全选
                    <input type="checkbox" class="selectOther">反选
                </td>
                <td>姓名</td>
                <td>性别</td>
                <td>年龄</td>
            </tr>
        </thead>
        <tbody>
            <tr> 
                <td><input type="checkbox" class="user" /></td>
                <td>张三</td>
                <td>男</td>
                <td>28</td>
            </tr>
            <tr>
                <td><input type="checkbox" class="user" /></td>
                <td>李四</td>
                <td>女</td>
                <td>18</td>
            </tr>
            <tr>
                <td><input type="checkbox" class="user" /></td>
                <td>王八</td>
                <td>男</td>
                <td>45</td>
            </tr>
        </tbody>

    </table>
    <script>
        // var user = document.querySelectorAll(".user");
        var all = 3;
        document.querySelector("#add").onclick = function () {
            var username = document.querySelector("#username").value;
            var sex = document.querySelector("input[name = 'sex']:checked").value;
            var age = document.querySelector("#age").value;
            var html = `<tr><td><input type="checkbox" class="user" /></td> <td>${username}</td><td>${sex}</td><td>${age}</td>
            </tr>`
            document.querySelector("tbody").innerHTML = document.querySelector("tbody").innerHTML + html;
             all++


                     document.querySelectorAll('.user').forEach(function(item){
        item.onclick = function(){
            // 如果当前被勾选的user个数与 user个数相同 就证明全选
            // if(document.querySelectorAll('.user').length == document.querySelectorAll('.user:checked').length){
            //     document.querySelector('.selectAll').checked = true;
            // }else{
            //     document.querySelector('.selectAll').checked = false;
            // }
            // 不论怎么写 就是伪checked属性赋值 true或者false 比较长度得到的就是布尔值
            document.querySelector('.selectAll').checked = document.querySelectorAll('.user').length == document.querySelectorAll('.user:checked').length
        }
    })
            // return all;
            // console.log(all);
            // 全选隐藏机制
        //     var num = 0;
        //     var user = document.querySelectorAll(".user")
        // for(a = 0; a<all;a++){
        //     user[a].onclick = function(){
        //         var flag = this.checked;
        //         if(flag){
        //         num++;
        //         }else{
        //             num--;
        //         }
        //      if(num==all){
        //     document.querySelector(".selectAll").checked = true;
        // }else{
        //     document.querySelector(".selectAll").checked = false;
        // }
        //         // console.log(num);
        //     }
        // }
        }
        document.querySelector(".selectAll").onclick = function () {
            var flag = this.checked;
            var user = document.querySelectorAll(".user");
            // console.log(flag);
            if (flag) {
                user.forEach(function (dom) {
                    dom.checked = true;
                    // console.log(dom[key]);
                });
            }
            else {
                user.forEach(function (dom) {
                    dom.checked = false;
                    // console.log(dom[key]);
                });
            }
        }
        document.querySelector(".selectOther").onclick = function(){
            var user = document.querySelectorAll(".user");
            for(k = 0;k<user.length;k++){
                console.log(user[k])
                // if(user[k].checked==false){
                //     user[k].checked=true;
                //     // console.log(user[k])
                // }else{
                //     user[k].checked=false;
                // }
                user[k].checked = !user[k].checked;
            }  
           
        }



        document.querySelectorAll('.user').forEach(function(item){
        item.onclick = function(){
            // 如果当前被勾选的user个数与 user个数相同 就证明全选
            // if(document.querySelectorAll('.user').length == document.querySelectorAll('.user:checked').length){
            //     document.querySelector('.selectAll').checked = true;
            // }else{
            //     document.querySelector('.selectAll').checked = false;
            // }
            // 不论怎么写 就是伪checked属性赋值 true或者false 比较长度得到的就是布尔值
            document.querySelector('.selectAll').checked = document.querySelectorAll('.user').length == document.querySelectorAll('.user:checked').length
        }
    })





        // var num = 0;
        //     var user = document.querySelectorAll(".user")
        // for(a = 0; a<user.length;a++){
        //     user[a].onclick = function(){
        //         var flag = this.checked;
        //         if(flag){
        //         num++;
        //         }else{
        //             num--;
        //         }
        //      if(num==user.length){
        //     document.querySelector(".selectAll").checked = true;
        // }else{
        //     document.querySelector(".selectAll").checked = false;
        // }
        //         // console.log(num);
        //     }
        // }





















        // var user = document.querySelectorAll(".user");
        // var num = 0;
        // for(a = 0; a<user.length;a++){
        //     user[a].onclick = function(){
        //         var flag = this.checked;
        //         if(flag){
        //         num++;
        //         }else{
        //             num--;
        //         }
        //      if(num==user.length){
        //     document.querySelector(".selectAll").checked = true;
        // }else{
        //     document.querySelector(".selectAll").checked = false;
        // }
        //         // console.log(num);
        //     }
        // }




    //    console.log(res);
    //    console.log(user.length);
        // if(num==user.length){
        //     document.querySelector(".selectAll").checked = true;
        // }




        // var user = document.querySelectorAll(".user")
        // var ans = [];
        // for(i = 0; i<user.length;i++){
        //         user[i].setAttribute("index",i)
        //     }
        // document.querySelector(".user").onclick = function () {

        //         user.forEach(function (dom) {
        //             var flag = dom.checked;
        //             // console.log()
        //             ans.push(flag);
        //             // console.log(ans)
        //         })
        //         console.log(ans)
        // }
        //  var res = ans.every (function (item) {
        //     // user[key].checked = true
        //     // console.log(item)
        //         return item;
                
                
        // })
        
        // document.querySelector(".selectOther").onclick = function () {

        // }
    </script>
</body>

</html>